<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '资料库',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <wd-search
    custom-class="custom-search mb-2"
    v-model="searchInput"
    @search="handleSearch"
    @clear="handleClear"
    placeholder-left
    hide-cancel
  />
  <wd-card class="custom-card my-2 mx-4" v-for="(item, index) in dataList" :key="index">
    <view class="flex items-center py-4">
      <wd-img width="56rpx" height="56rpx" src="/static/icon/pdf.svg" />
      <view class="flex-1 ml-3">
        <view class="text-black text-sm line-clamp-1">市防汛抗旱指挥部关于防汛Ⅳ级应急.pdf</view>
        <view class="text-xs line-clamp-1">(大小:0.90 M)</view>
      </view>
    </view>
    <view class="custom-drivider"></view>
    <view class="flex py-3">
      <view class="flex flex-1 justify-center items-center" @click="handleDetail(item)">
        <wd-img width="28rpx" height="28rpx" src="/static/icon/icon5.svg" />
        <text class="text-xs color-blue ml-2">查看详情</text>
      </view>
      <view class="flex flex-1 justify-center items-center" @click="handleDownLoad(item)">
        <wd-img width="28rpx" height="28rpx" src="/static/icon/icon6.svg" />
        <text class="text-xs color-yellow ml-2">下载文件</text>
      </view>
    </view>
  </wd-card>
</template>

<script lang="ts" setup>
const searchInput = ref<string>('')
const dataList = ref([])
const handleSearch = ({ value }) => {
  searchInput.value = value
  getData()
}
const handleClear = () => {
  searchInput.value = ''
  getData()
}
const getData = async () => {
  try {
    dataList.value = [{ id: 1 }, { id: 2 }]
  } catch (err) {
    console.log(err)
  } finally {
  }
}
const handleDetail = (item: any) => {}
const handleDownLoad = (item: any) => {}
onMounted(() => {
  getData()
})
</script>

<style lang="scss">
page {
  background: #f4f8fb; 
  padding-bottom: 2rpx;
}
$primary-color: #2953ff;
$warning-color: #ff910b;
.color-blue {
  color: $primary-color;
}
.color-yellow {
  color: $warning-color;
}
.custom-search {
  .wd-search__block {
    border-radius: 8rpx;
  }
  .wd-search__search-left-icon {
    color: #828282;
    font-size: 30rpx;
  }
}
.custom-card {
  background: #fff;
  border-radius: 24rpx;
}
.custom-drivider {
  height: 1rpx;
  margin: 0;
  background: #E5E5E5;
}
</style>
